<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="ie lt7 lt8 lt9" lang="en"><![endif]-->
<!--[if IE 7]>
<html class="ie ie7 lt7 lt8 lt9" lang="en"><![endif]-->
<!--[if IE 8]>
<html class="ie ie8 lt9" lang="en"><![endif]-->
<!--[if IE 9]>
<html class="ie ie9" lang="en"><![endif]-->
<!--[if (gt IE 9) | !(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="../include/head.jsp"%>
    <%@include file="../include/link.jsp" %>
    <link rel="stylesheet" type="text/css" href="../../../static/wxApp/css/index.css">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<%@include file="../include/appHerder.jsp" %>
<div class="container">
    <div class="content">
        <div id="main" style="width: 600px;height:600px;margin: 0 auto;padding: 90px 0"></div>
    </div>
</div>
<%@include file="../include/footer.jsp" %>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var legendStr="[";
    var legendData = [];
    var seriesData;
    var seriesArr=[];
    var seriesStr="[";
    $.ajax({
        url:"/getTageData",
        type:'get',
        dataType:'json',
        success:function(data){
            var jsonData=eval(data);
            option.legend.selected = {};
            for (var i=1; i < 10; i++) {
                seriesData=new Object();
                legendStr+=jsonData[i].tag+","
                legendData.push(jsonData[i].tag);
                seriesData.value=jsonData[i].num;
                seriesData.name=""+jsonData[i].tag+"";
                seriesArr.push(seriesData);
                seriesStr+="{value:"+jsonData[i].num+",name:"+jsonData[i].tag+"},"
            }

            legendStr=legendStr.substring(0,legendStr.length-1)+']';
            seriesStr=seriesStr.substring(0,seriesStr.length-1)+']';
            console.log(legendStr);
            console.log(seriesStr);
            myChart.setOption({
                legend: {
                    data:legendStr
                },
                series: [
                    {
                        data:seriesArr
                    }
                ]
            });
        }
    });
    option = {
        title: {
            text: '小程序类型数量对比',
            subtext: '所占百分比',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} :  ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:[]
        },
        series: [
            {
                name: '类型',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);


</script>

</body>
</html>
